<template>
  <div class="workflow" ref="workflow">
    <div class="animation-container" ref="container">
      <div class="workflow-title" ref="workflowTitle">我们的服务流程方案</div>
      <div class="list" ref="list">
        <div data-order="0" class="list-item" ref="listItem">
          <div class="aa" ref="aa">111</div>
        </div>
        <div data-order="1" class="list-item" ref="listItem"></div>
        <div data-order="1" class="list-item" ref="listItem"></div>
        <div data-order="0" class="list-item" ref="listItem"></div>
        <div data-order="0" class="list-item" ref="listItem"></div>
        <div data-order="1" class="list-item" ref="listItem"></div>
        <div data-order="1" class="list-item" ref="listItem"></div>
        <div data-order="0" class="list-item" ref="listItem"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
let listItem, index;
const workflow = ref();
const list = ref();
const workflowTitle = ref();
const container = ref();
const aa = ref();
onMounted(() => {
  index = document.querySelector(".index");
  listItem = document.querySelectorAll(".list-item");
  updateAnimationMap();
  updateStyles();
  index.addEventListener("scroll", updateStyles);
  window.addEventListener("resize", () => {
    updateAnimationMap();
    updateStyles();
  });
});
function createAnimation(xStart, xEnd, yStart, yEnd) {
  return function (x) {
    //第一阶段
 
    if (x <= xStart) {
      aa.value.style.opacity = "0";
      return yStart;
    }
    //第三阶段

    if (x >= xEnd) {  
      aa.value.style.opacity = "1";
      return yEnd;
    }
    aa.value.style.opacity = "0";
    // workflow.value.style.height = "150vw";
    //斜线部分（高中函数知识，也可以理解为yStart + ((x - xStart) * (yEnd - yStart) / (xEnd - xStart)) ）
    return yStart + ((x - xStart) / (xEnd - xStart)) * (yEnd - yStart);
  };
}
function pxToVw(px) {
  // 获取视口宽度100vw=document.documentElement.clientWidth   
  const vw = Math.max(
    document.documentElement.clientWidth || 0,
    window.innerWidth || 0
  );
  // 计算并返回vw值
  return ((px / vw) * 100).toFixed(2); // 使用toFixed(2)保留两位小数
}
const animationMap = new Map();
let workflowTitledh;
function updateAnimationMap() {
  animationMap.clear();
  if (listItem.length === 0) {
    return;
  }
  const workflowRect = workflow.value.getBoundingClientRect();
  const scrollY = index.scrollTop;
  const workflowTop = workflowRect.top + scrollY;
  const workflowBottom = workflowRect.bottom + scrollY - container.value.offsetHeight*1.05;//减去的是你想怎么去显示他的部分
  const opacityWorkflowtitle = createAnimation(
    workflowTop + 800,
    workflowBottom,
    0,
    1
  );
  const fsorkflowtitle = createAnimation(
    workflowTop + 800,
    workflowBottom,
    0,
    pxToVw(40)
  );
  const listRect = list.value.getBoundingClientRect();
  for (let i = 0; i < listItem.length; i++) {
    const item = listItem[i];
    const scrollStart = workflowTop + item.dataset.order * 400;
    const scrollEnd = workflowBottom;
    const itemWidth = item.clientWidth;
    const itemHeight = item.clientHeight;
    const itemLeft = item.offsetLeft;
    const itemTop = item.offsetTop;
    const opacityAnimation = createAnimation(scrollStart, scrollEnd, 0, 1);
    const scaleAnimation = createAnimation(scrollStart, scrollEnd, 0.5, 1);
    const translateXAnimation = createAnimation(
      scrollStart,
      scrollEnd,
      listRect.width / 2 - itemLeft - itemWidth / 2,
      0
    );
    const translateYAnimation = createAnimation(
      scrollStart,
      scrollEnd,
      listRect.height / 2 - itemTop - itemHeight / 2,
      0
    );
    const animations = {
      opacity: function (scrollY) {
        return opacityAnimation(scrollY);
      },
      transform: function (scrollY) {
        const scaled = scaleAnimation(scrollY);
        const x = translateXAnimation(scrollY);
        const y = translateYAnimation(scrollY);
        return `translate(${x}px, ${y}px) scale(${scaled})`;
      },
    };
    animationMap.set(item, animations);
  }
  workflowTitledh = {
    opacity: function (scrollY) {
      return opacityWorkflowtitle(scrollY);
    },
    fontSize: function (scrollY) {
      return fsorkflowtitle(scrollY);
    },
  };
}
function updateStyles() {
  const scrollY = index.scrollTop;
  workflowTitle.value.style.opacity = workflowTitledh.opacity(scrollY);
  // workflowTitle.value.style.fontSize = workflowTitledh.fontSize(scrollY) + "vw";
  for (const [item, animations] of animationMap) {
    for (const prop in animations) {
      item.style[prop] = animations[prop](scrollY);
    }
  }
}
</script>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.workflow {
  height: 200vw;
  background: #fff;
}

.animation-container {
  position: sticky;
  height: 46.512vw;
  top: 0;
  background-color: #fff;
  .workflow-title {
    padding-top: 9.302vw;
    font-size: 2.067vw;
    text-align: center;
    font-weight: 700;
  }
}

.list {
  position: absolute;
  top: 12.92vw;
  left: 50%;
  transform: translate(-50%);
  width: 62.016vw;
  aspect-ratio: 2/1;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 2fr);
  place-items: center;
}

.list-item {
  position: relative;
  width: 6.202vw;
  height: 6.202vw;
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 10px;
  .aa {
    position: absolute;
    left: 0;
    bottom: -30px;
    transition: all 2s;
  }
}

.list-item:nth-child(3n + 1) {
  background: linear-gradient(#3e90f7, #246bf6);
}
.list-item:nth-child(3n + 2) {
  background: linear-gradient(#53b655, #469c50);
}
.list-item:nth-child(3n + 3) {
  background: linear-gradient(#f3a93c, #f4ad3d);
}
</style>
